<template>
  <div class="page">
    <div class="content">
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="7" style="position:relative">
          <canvas id="canvas" style="width:94%;height:210px;position:absolute;bottom:0px;left:10px;z-index:1;" />
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span class="word">本日产品数据同步数量</span>
              <el-button style="float: right; padding: 3px 0;z-index:100" type="text" @click="enter('product')">查看详细>></el-button>
            </div>
            <div class="num">{{ userNum }}</div>
            <el-row type="flex" justify="center" class="first">
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步成功：</span> {{ usersuccessPtc }} <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px;" icon-class="top" /> -->
              </el-col>
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步失败：</span> {{ userfailPtc }}
                <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px; transform: rotate(180deg);" icon-class="bottom" /> -->
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步超时：</span> {{ userouttimePtc }} <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px; transform: rotate(180deg);" icon-class="bottom" /> -->
              </el-col>
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步中：</span> {{ usersyncingPtc }} <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px;" icon-class="top" /> -->
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span class="word">本日产品数据同步进度</span>
            </div>
            <div class="echarts">
              <div id="echarts" :style="{width: '260px', height: '260px'}" style="position:absolute;top: 20px;" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span class="word">本日产品数据同步成功率</span>
            </div>
            <div class="echarts">
              <!-- <div id="echarts1" :style="{width: '150px', height: '150px',}" /> -->
              <div id="echarts1" style="width:400px;height:270px;position:absolute;top: 30px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="7" style="position:relative">
          <canvas id="canvas1" style="width:94%;height:200px;position:absolute;bottom:0px;left:10px;z-index:100;" />
          <el-card class="box-card1">
            <div slot="header" class="clearfix" style="position:relative">
              <span class="word">本日用户数据同步数量</span>
              <el-button style="float: right; padding: 3px 0;z-index:100" type="text" @click="enter('user')">查看详细>></el-button>
            </div>
            <div class="num">{{ productNum }}</div>
            <el-row type="flex" justify="center" class="first">
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步成功：</span> {{ productsuccessPtc }} <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px;" icon-class="top" /> -->
              </el-col>
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步失败：</span> {{ productfailPtc }} <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px; transform: rotate(180deg);" icon-class="bottom" /> -->
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步超时：</span> {{ productouttimePtc }} <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px; transform: rotate(180deg);" icon-class="bottom" /> -->
              </el-col>
              <el-col :span="12" class="center" style="position:relative">
                <span class="word">同步同步中：</span> {{ productsyncingPtc }} <!-- <svg-icon style="font-size:30px;position:absolute;right:-5px;top:-8px;" icon-class="top" /> -->
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span class="word">本日用户数据同步进度</span>
            </div>
            <div class="echarts">
              <div id="echarts2" :style="{width: '260px', height: '260px',}" style="position:absolute;top: 20px;" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span class="word">本日用户数据同步率</span>
            </div>
            <div class="echarts">
              <div id="echarts3" style="width:400px;height:270px;position:absolute;top: 30px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import water from '@/utils/water.js'
import { getData } from '@/api/index.js'
import { mapGetters } from 'vuex'
import 'echarts-liquidfill/src/liquidFill.js'
export default {
  name: 'Dashboard',
  data() {
    return {
      userNum: '',
      userfailPtc: '',
      userouttimePtc: '',
      usersyncingPtc: '',
      usersyncSchePtc: '',
      usersuccessRate: '',
      usersuccessPtc: '',
      productNum: '',
      productsuccessPtc: '',
      productfailPtc: '',
      productouttimePtc: '',
      productsyncingPtc: '',
      productsyncSchePtc: '',
      productsuccessRate: ''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {
    this.getAllData()
    water('canvas')
    water('canvas1')
  },
  methods: {
    enter(val) {
      if (val === 'product') {
        this.$router.push('/product/index')
      } else {
        this.$router.push('/expenses/index')
      }
    },
    getAllData() {
      // 0 为用户
      getData({ queryType: '1' }).then(res => {
        this.userNum = res.data.todayAllNum
        this.usersyncSchePtc = res.data.syncSchePtc // 进度
        this.usersuccessPtc = res.data.successNum // 同步成功
        this.userfailPtc = res.data.failNum // 同步失败
        this.userouttimePtc = res.data.outtimeNum // 同步超时
        this.usersyncingPtc = res.data.syncingNum // 同步中
        this.usersuccessRate = res.data.successRate
        console.log(res)
        this.echartsMit(this.usersyncSchePtc)
        this.echartsMit1(this.usersuccessRate) // 仪表盘
      })
      // 1 为产品
      getData({ queryType: '0' }).then(res => {
        console.log(res)
        this.productNum = res.data.todayAllNum
        this.productsyncSchePtc = res.data.syncSchePtc // 进度
        this.productsuccessPtc = res.data.successNum // 同步成功
        this.productfailPtc = res.data.failNum // 同步失败
        this.productouttimePtc = res.data.outtimeNum // 同步超时
        this.productsyncingPtc = res.data.syncingNum // 同步中
        this.productsuccessRate = res.data.successRate
        this.echartsMit2(this.productsyncSchePtc)
        this.echartsMit3(this.productsuccessRate)
      })
    },
    /* addNum() {
      setInterval(() => {
        var random = Math.floor(Math.random() * 10)
        this.productNum = this.productNum + random
      }, 3000)
    }, */
    echartsMit(nums) {
      var dom = document.getElementById('echarts')
      var myChart = this.$echarts.init(dom)
      var num = nums.replace('%', '') / 100
      myChart.setOption({
        series: [{
          type: 'liquidFill',
          data: [num, num],
          radius: '65%',
          color: ['rgba(157,192,249, 0.4)', 'rgba(0,222,255, 0.4)'],
          itemStyle: {
            shadowBlur: 0
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(0,222,255, 0.5)',
              shadowBlur: 20
            }
          },
          label: {
            normal: {
              textStyle: {
                color: '#409EFF',
                insideColor: 'yellow',
                fontSize: 30
              },
              formatter: function(param) {
                var value = (param.value * 100) + '%'
                return value
              }
            }/* ,
            formatter: function(param) {
              console.log(param)
              debugger
              return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value.toFixed(1)
            }, */
          }
        }]
      })
    },
    echartsMit1(nums) {
      var dom = document.getElementById('echarts1')
      var myChart = this.$echarts.init(dom)
      var num = parseFloat(nums)
      myChart.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          // name: '同步成功率',
          type: 'gauge',
          detail: {
            formatter: function(param) {
              return param + '%'
            },
            textStyle: {
              fontSize: 20
            }
          }, // 仪表盘显示数据
          axisLine: { // 仪表盘轴线样式
            lineStyle: {
              width: 20,
              color: [[0.2, 'rgba(0,222,255, 0.7)'], [0.8, 'rgba(157,192,249, 1)'], [1, '#4e637d']]
            }
          },
          splitLine: { // 分割线样式
            length: 20
          },
          data: [{
            value: num
            // name: '成功率'
          }],
          markPoint: {
            symbol: 'circle',
            symbolSize: 5,
            data: [
            // 跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
              { x: 'center', y: 'center', itemStyle: { color: '#FFF' }}
            ]
          }
        }]
      })
    },
    echartsMit2(nums) {
      var dom = document.getElementById('echarts2')
      var num = nums.replace('%', '') / 100
      var myChart = this.$echarts.init(dom)
      myChart.setOption({
        series: [{
          type: 'liquidFill',
          data: [num, num],
          radius: '65%',
          itemStyle: {
            shadowBlur: 0
          },
          color: ['rgba(157,192,249, 0.4)', 'rgba(0,222,255, 0.4)'],
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 3,
              borderColor: 'rgba(0,222,255, 0.5)',
              shadowBlur: 20
            }
          },
          label: {
            normal: {
              formatter: function(param) {
                var value = (param.value * 100) + '%'
                return value
              },
              textStyle: {
                color: '#409EFF',
                insideColor: 'yellow',
                fontSize: 30
              }
            }
          }
        }]
      })
    },
    echartsMit3(nums) {
      var num = parseFloat(nums)
      var dom = document.getElementById('echarts3')
      var myChart = this.$echarts.init(dom)
      myChart.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          name: '同步成功率',
          type: 'gauge',
          detail: {
            formatter: function(param) {
              return param + '%'
            },
            textStyle: {
              fontSize: 20
            }
          }, // 仪表盘显示数据
          axisLine: { // 仪表盘轴线样式
            lineStyle: {
              width: 20,
              color: [[0.2, 'rgba(0,222,255, 0.7)'], [0.8, 'rgba(157,192,249, 1)'], [1, '#4e637d']]
            }
          },
          splitLine: { // 分割线样式
            length: 20
          },
          data: [{
            value: num
            // name: '成功率'
          }],
          markPoint: {
            symbol: 'circle',
            symbolSize: 5,
            data: [
            // 跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
              { x: 'center', y: 'center', itemStyle: { color: '#FFF' }}
            ]
          }
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  margin-top: -22px;
}
.dashboard {
  &-container {
    margin: 30px
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.box-card1{
  height: 240px;
}
.content{
  margin: 25px 0;
  .num{
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .word{
    color: #6c6c6c;
  }
  .box-card{
    height: 200px;
  }
  .first{
    margin-bottom: 15px;
  }
}
.echarts{
  display: flex;
  justify-content: center;
}
.echarts1{
  display: flex;
  justify-content: center;
}
.center{
  text-align: center;
  font-size: 14px;
}

</style>
<style>
.el-card__body{
  padding: 0 !important;
}
</style>
